<template>
  <div class="custom-search">
    <el-popover
      placement="bottom-end"
      width="500"
      trigger="click"
      v-model="visible"
      popper-class="custom-search-pop"
    >
      <el-button slot="reference" size="mini">
        <i class="V7_iconfont V7_iconV7tubiao_shaixuan"></i>
        {{commonFilterName}}
      </el-button>
      <div class="custom-list">
        <div class="custom-title">
          <span>更多筛选</span
          ><span class="oprate-btn" @click="showCustomSearch"
            ><i class="V7_iconfont V7_iconV7tubiao_xinzeng"></i
          ></span>
        </div>
        <div class="custom-con">
          <div class="common-con-title">
            <span class="title-span"
              ><i class="V7_iconfont V7_iconV7tubiao_dian"></i>常用筛选</span
            >
          </div>
          <div class="custom-common">
            <div
              class="common-list"
              v-for="(item, index) in customList"
              :key="index"
              @click="customClick(item)"
            >
              <span>{{ item.filterName }}</span
              ><span class="common-list-operate">
                <i
                  class="V7_iconfont V7_iconV7tubiao_gerenshezhi-bianji1"
                  v-show="!item.default"
                  @click.stop="editCustomClick(item)"
                ></i>
                <i
                  v-show="!item.default"
                  class="V7_iconfont V7_iconV7tubiao_shanchutong"
                  @click.stop="deleteCustomClick(item)"
                ></i>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div v-show="isShowCustom" class="custom-box">
        <div class="custom-con">
          <div class="custom-con-title">
            <span class="title-span"
              ><i class="V7_iconfont V7_iconV7tubiao_dian"></i>自定义筛选</span
            >
          </div>
          <div class="common">
            <div class="common-name">
              <span class="label">名称: </span>
              <el-input
                v-model="customName"
                placeholder="请输入名称"
                size="mini"
              ></el-input>
            </div>
            <div class="common-condition">
              <div class="common-title">筛选条件</div>
              <conditionForm
                :fieldsList="filterFieldList"
                :conditonList="conditonList"
                class="condition"
                type="filter"
              >
              </conditionForm>
            </div>
          </div>
        </div>
      </div>
      <div v-show="isShowCustom" class="oprate">
        <el-button size="mini" @click="saveCondition">保存为常用检索</el-button>
        <el-button size="mini" type="primary" @click="searchClick">检索</el-button>
      </div>
    </el-popover>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import cloneDeep from 'lodash/cloneDeep'
import conditionForm from '@/afterSales/components/conditionFilter/conditionForm.vue'
import { commonAction } from '@/utils/common'

@Component({
  name: 'commonFilter',
  components: {
    conditionForm
  }
})
export default class CommonFilter extends Vue {
  [x: string]: any
  @Prop() private filterType
  @Prop() private modelId
  @Prop() private filterConfigId
  @Prop({ default: () => [] }) private filterFieldList
  private conditonList: any[] = [[{ businessId: '', fieldType: '', filterType: '', logicalType: 1 }]]
  private visible: boolean = false
  private commonFilterName: string = '自定义筛选'
  private isShowCustom: boolean = false
  private iaAdd: boolean = true

  private customName = ''
  private customList: any[] = []

  private currentCustomId = ''

  private showPopover (): void {
    this.visible = true
  }

  private hidePopover (val) {
    this.visible = false
  }

  private saveCondition () {
    if (this.customName) {
      if (this.isAdd) {
        this.addFilter()
      } else {
        this.updateFilter()
      }
      this.$emit('save-condition', this.customName, this.conditonList)
    } else {
      this.$message.error('名称不能为空')
    }
  }

  private searchClick () {
    this.visible = false
    this.$emit('common-filter', this.conditonList)
  }

  private showCustomSearch (): void {
    this.isAdd = true
    this.customName = ''
    this.currentCustomId = ''
    this.isShowCustom = true
  }

  private customClick (item): void {
    this.commonFilterName = item.filterName
    this.customName = item.filterName
    this.currentCustomId = item.id
    this.isShowCustom = false
    this.$emit('common-filter', item.filters)
    this.visible = false
  }

  private editCustomClick (item): void {
    this.isAdd = false
    this.currentCustomId = item.id
    this.customName = item.filterName
    this.$set(this, 'conditonList', cloneDeep(item.filters))
    this.isShowCustom = true
  }

  private deleteCustomClick (item): void {
    this.$emit('delete-custom', item)
    commonAction({
      url: `/server-work/action/filter/delete/${item.id}`,
      method: 'get'
    }).then(res => {
      if (res.success) {
        this.$message.success('删除成功')
        this.getCustomList()
      }
    })
    if (this.currentCustomId === item.id) {
      this.isShowCustom = false
      this.currentCustomId = ''
      this.customName = ''
    }
  }

  private addFilter () {
    const postData: any = { filterName: this.customName, filterType: this.filterType, modelId: this.modelId, filters: this.conditonList }
    if (this.filterType === 5) {
      postData.filterConfigId = this.filterConfigId
    }
    commonAction({
      url: '/server-work/action/filter/insert',
      method: 'post',
      data: postData
    }).then(res => {
      if (res.success) {
        this.isShowCustom = false
        this.$message.success('保存成功')
        this.getCustomList()
      }
    })
  }

  private updateFilter () {
    commonAction({
      url: '/server-work/action/filter/update',
      method: 'post',
      data: { filterName: this.customName, filterType: this.filterType, filters: this.conditonList, id: this.currentCustomId }
    }).then(res => {
      if (res.success) {
        this.isShowCustom = false
        this.$message.success('保存成功')
        this.getCustomList()
      }
    })
  }

  public getCustomList () {
    const postData: any = { filterType: this.filterType, modelId: this.modelId }
    if (this.filterType === 5) {
      postData.filterConfigId = this.filterConfigId
    }
    commonAction({
      url: '/server-work/action/filter/list',
      method: 'post',
      data: postData
    }).then(res => {
      if (res.success) {
        this.customList = res.data
        this.customList.unshift({ filterName: '全部工单', filters: [], id: 'all', default: true })
      }
    })
  }

  private created () {
    if (this.filterType !== 5) {
      this.getCustomList()
    }
  }

  @Watch('filterConfigId')
  private filterConfigIdChange () {
    if (this.filterType === 5) {
      this.commonFilterName = '自定义筛选'
      this.customName = ''
      this.conditonList = [[{ businessId: '', fieldType: '', filterType: '', logicalType: 1 }]]
      this.getCustomList()
    }
  }
}
</script>

<style lang="stylus" scoped>
.oprate
  display flex
  justify-content flex-end
.common-title
  padding 15px
  font-size 12px
.common-con-title
  display flex
  align-items center
  padding 10px 15px 10px
  span
    font-size 12px
  .V7_iconfont
    color $c-main
    font-size 12px
.custom-con-title
  display flex
  align-items center
  padding 10px 15px 10px
  border-top 1px solid $border-main
  span
    font-size 12px
  .V7_iconfont
    color $c-main
    font-size 12px
.custom-common
  max-height 100px
  overflow-y scroll
  padding 0 0 10px
  .common-list
    padding 5px 15px 5px
    display flex
    flex-direction row
    justify-content space-between
    align-items center
    cursor pointer
    font-size 12px
  .common-list-operate
    display none
  .V7_iconfont
    margin-right 10px
    color $icon-gray
    font-size 12px
    cursor pointer
  .common-list:hover
    background #F3F6F9
    .common-list-operate
      display block
.title-span
  color $fc-gray2
.delet-span
  cursor pointer
  &:hover
    color $c-danger
.oprate
  padding 10px 15px 10px
.common-name
  display flex
  align-items center
  padding 0 15px 0
  .label
    display block
    white-space nowrap
    margin-right 8px
    font-size 12px
.custom-list
  width 100%
  font-size 12px
  color $fc-gray3
  .custom-title
    padding 10px 15px 10px
    font-size 14px
    font-weight 600
    color $fc-gray2
    display flex
    justify-content space-between
    border-bottom 1px solid $border-main
    .oprate-btn
      .V7_iconfont
        font-size 12px
        color $c-main
        cursor pointer
.custom-box
  width 100%
  color $fc-gray3
  .condition
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
  .add-btn
    color $c-main
    cursor pointer
    .V7_iconfont
      font-size 10px
  .custom-con
    .oprate-btn
      .V7_iconfont
        font-size 12px
        color $c-main
        cursor pointer
.custom-search
  .V7_iconfont
    font-size 12px
</style>
<style lang='stylus'>
.custom-box
  .el-dropdown-menu
    padding 0
.custom-search-pop
  padding 0
</style>
